import React, { Fragment, PureComponent } from 'react'
// import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Modal, Row, Col, Card, Button, Skeleton, Avatar, Badge } from 'antd'
import styles from "./index.less"
const { Meta } = Card;

@connect(({ loading, dispatch, app }) => ({
  reloading: loading.effects['app/getOrganizTree'],
}))
// @Form.create()
class OrganizaInfo extends PureComponent {
  state = {
    visiable: false
  }
  editOrganization = () => {
    this.setState({
      visiable: true
    })
  }
  handleOk = () => {
    console.log('ok')
    this.setState({
      visiable: false
    })
  }
  handleCancel = () => {
    console.log("cancel")
    this.setState({
      visiable: false
    })
  }


  render() {
    const { visiable } = this.state;
    const { reloading } = this.props;
    // console.log(`info-------->`, app)
    return (
      <Fragment>
        <Card
          className="organiza-info"
          style={{ marginTop: 16 }}
          type="inner"
          title="组织信息"
          extra={<a onClick={this.editOrganization}>编辑</a>}>
          <Skeleton avatar active loading={true}>{/* --------reloading--------- */}
            <Meta
              avatar={<Avatar size="large" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
              description={<Row>
                <Col span={24}><span>组织名称：</span>66666666</Col>
                <Col span={24}><span>组织说明：</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</Col>
                <Row>
                  <Col span={12}><Badge status="success" />公开让用户或公司加入</Col>
                  <Col span={12}><Badge status="success" />启用此组织</Col>
                </Row>
              </Row>}
            />
          </Skeleton>
        </Card>


        <Modal
          title={<span>
            编辑 <span style={{ color: '#067dc6' }}>{"XXXX"}</span> 信息
          </span>}
          visible={visiable}
          footer={[
            <Button key="back" onClick={this.handleCancel}>取 消</Button>,
            <Button key="submit" type="primary" onClick={this.handleOk}>确 定</Button>,
          ]}
        >
          666
        </Modal>
      </Fragment>
    )
  }
}


export default OrganizaInfo;
